<template>
    <!-- 人员管理下的员工管理里的:员工信息卡片组件 -->
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="img-header item">
                    <img :src="employee.photo_url" alt="头像">
                    <div>
                        {{ employee.username }}
                    </div>
                </div>
                <div class="item text">
                    权限:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ employee.status }}
                </div>
                <div class="item text">
                    联系电话:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ employee.phone }}
                </div>
                <div class="item text">
                    近期登录:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ employee.last_login_time }}
                </div>
            </div>

            <div style="display: flex; justify-content: right;">
                <!-- 删除员工按钮 -->
                <el-link type="danger" 
                    @click="deleteEmployee"
                    >
                        <i class="el-icon-error"></i>
                        删除员工
                </el-link>

                <!-- 信息详情按钮 -->
                <el-link type="success" 
                    style="margin-left: 40px;"
                    @click="apperDetail"
                    >
                        <i class="el-icon-info"></i>
                        信息详情
                </el-link>

                <!-- 管理老人按钮 -->
                <el-link type="success" 
                    style="margin-left: 40px;" 
                    v-if="employee.status==='员工'"
                    @click="apperManageOlder"
                    >
                        <i class="el-icon-s-data"></i>
                        管理老人
                </el-link>

            </div>

        </el-card>
    </div>
</template>

<script>
import myAxios from '@/tools/myAxios';
export default {
    name:'InfoCard',
    props:['employee'],
    methods:{
        // 点击展示员工详情对话框
        apperDetail(){

            this.$bus.$emit('clickDetailEmployee',JSON.parse(JSON.stringify(this.employee)))
        },
        // 删除员工
        deleteEmployee(){
            myAxios(
                'http://localhost:8088/admin/deleteemployeeforadmin?id='+this.employee.id,
                'get',
                null,
                (data)=>{
                    // 提示一下
                    this.$message({
                        message: '删除员工成功!',
                        type: 'success'
                    });
                    // 刷新页面
                    window.location.reload();
                }
            )
        },
        // 点击展示管理老人对话框
        apperManageOlder(){
            // 从后台拿到所对应的老人信息
            myAxios(
                'http://localhost:8088/employee/getolderlist?id='+this.employee.id,
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        // 提示一下
                        this.$message({
                            message: '该员工没有管理老人!',
                            type: 'warning'
                        });
                    }else{
                        this.$bus.$emit('clickOlderList',JSON.parse(JSON.stringify(data)))
                    }
                }
            );
        }
    }
}
</script>

<style lang="less" scoped>

.box-card{
    width: 350px;
    .img-header{
        display: flex;
        align-items: center;

        div{
            margin-left: 20px;
            color: #409EFF;
            font-size: 24px;
            font-family: "Helvetica Neue";
            font-style: italic;
            font-weight: bold;
        }
    }
    .text {
        font-size: 14px;
        color: #909399;
        font-weight: bold;
    }
    .item {
        margin-bottom: 5px;
    }
    img{
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin-bottom:5px;
    }
}
</style>